<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 第一个盒子 -->
    <div class="box">
        <div class="box-left">
            <div class="box-left1">1</div>
            <div class="box-left2">2</div>
        </div>
        <div class="box-right">3</div>
    </div>

    <!-- 第二个盒子 -->
    <div class="box2">
        <div class="a">1</div>
        <div class="b">
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
           <div class="b_content">123</div>
        </div>
        <div class="c">3</div>
    </div>

    <!-- 第三个盒子 -->
    <div class="box3">
        <div class="b1">
            <div class="left-a">123</div>
            <div class="left-b">456</div>
        </div>
        <div class="b2">
            <div class="con-a">a</div>
            <div class="con-b">b</div>
            <div class="con-c">c</div>
        </div>
        <div class="b3">加油 奥利给</div>
    </div>
</body>
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    /* 第一个盒子 */
    .box{
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: row;
    }
    .box-left{
       flex: 1;
        background-color: palevioletred;
        display: flex;
        flex-direction: column;
    }
    .box-right{
        flex: 1;
        background-color: sandybrown;
    }
    .box-left1{
        flex: 1;
        background-color: skyblue;
    }
    .box-left2{
        flex: 1;
        background-color: wheat;
    }

    /* 第二个盒子 */
    .box2{
        width: 300px;
        height: 600px;
        background-color: violet;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    .a{
        flex: 3;
        background-color: yellow;
    }
    .b{
        flex: 15;
        background-color: pink; 
        overflow-y: auto; 
    }
    .c{
        flex: 3;
        background-color: slateblue;
    }
    .b_content{
      width: 100%;
      height: 25px;
      line-height: 25px;
      background-color: tomato;
      border: 1px solid black;
    }
    .b>div:nth-child(1){
        width: 100%;
      height: 25px;
      line-height: 25px;
      background-color:#ccc; 
    }
    .b>div:last-child{
        width: 100%;
      height: 25px;
      line-height: 25px;
      background-color:#ccc;   
    }

    /* 第三个盒子 */

    .box3{
        width: 100%;
        height: 900px;
        background-color: #ccc;
        display: flex;
        flex-direction: column;
    }
    .b1{
        flex: 1;
        background-color: pink;
        display: flex;
        flex-direction: row;
    }
    .left-a{
        flex: 0.5;
        background-color: skyblue;
    }
    .left-b{
        flex: 8; 
        background-color: tomato;
    }
    .b2{
        flex: 10;
        background-color: rosybrown;
        display: flex;
        flex-direction: row;
    }
    .con-a{
        flex: 3;
        background-color: wheat;
    }
    .con-b{
        flex: 5;
        background-color: orange;
    }
    .con-c{
        flex: 2;
        background-color: palevioletred;
    }
    .b3{
        flex: 1;
        background-color: pink;
    }

</style>
</html>